<template>
  <t-modal 
    title="新增" 
    destroyOnClose
    :width="640" 
    :visible="visible" 
    :confirmLoading="loading"
    @ok="() => { $emit('ok');}"
    @cancel="() => {$emit('cancel');}"
  >
    <a-spin :spinning="loading">
      <a-form :form="form">
        <a-form-item class="hiddenItem">
          <a-input v-decorator="['uuid']" disabled type="hidden" />
        </a-form-item>
        <a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            placeholder="名称"
            v-decorator="[
              'buttonName',
              { rules: [{ required: true, message: '请输入名称！' }] },
            ]"
          />
        </a-form-item>
        <a-form-item label="编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            placeholder="编码"
            v-decorator="[
              'buttonCode',
              { rules: [{ required: true, message: '请输入编码！' }] },
            ]"
          />
        </a-form-item>
        <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <t-dict-select-tag
            type="select"
            dictCode="MenuStatus"
            placeholder="请选择状态"
            :allowClear="false"
            v-decorator="[
              'buttonStatus',
              {
                initialValue: 'MenuStatus.01',
                rules: [{ required: true, message: '请选择状态！' }],
              },
            ]"
          />
        </a-form-item>
        <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number
            placeholder="排序"
            :min="1"
            :max="9999"
            v-decorator="['buttonSort']"
          />
        </a-form-item>
        <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea
            v-decorator="['buttonRemake']"
            placeholder="备注"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-item>
      </a-form>
    </a-spin>
  </t-modal>
</template>

<script>
import pick from "lodash.pick";
import { TDictSelectTag } from '@/components'

const fields = [
  "uuid",
  "buttonName",
  "buttonCode",
  "buttonStatus",
  "buttonSort",
  "buttonRemake",
];
export default {
    components: {
		TDictSelectTag
	},
    props: {
        visible: {
        type: Boolean,
        required: true,
        },
        loading: {
        type: Boolean,
        default: () => false,
        },
        model: {
        type: Object,
        default: () => null,
        },
    },
    data() {
        return {
        labelCol: {
            xs: {
                span: 24,
            },
            sm: {
                span: 7,
            },
        },
        wrapperCol: {
            xs: {
                span: 24,
            },
            sm: {
                span: 13,
            },
        },
        form: this.$form.createForm(this),
        };
    },
    created() {
        // 防止表单未注册
        fields.forEach((v) => this.form.getFieldDecorator(v));
        // 当 model 发生改变时，为表单设置值
        this.$watch("model", () => {
          this.$nextTick(() => {
            this.model && this.form.setFieldsValue(pick(this.model, fields));
          })
        });
    },
};
</script>
